<template>
	<view>
		<!-- 导航栏 -->
		<news-nav-bar :tabBars="tabBars" @changtab="changtab" :tabIndex="tabIndex" ></news-nav-bar>
		<!-- 内容 -->
		<u-toast ref="uToast" />
		<!-- 导航栏切换 -->
		<view class="uni-tab-bar" :style="{height:TabHeight+'px'}" >
		<swiper class="swiper-box" :current="tabIndex"  @change='tabChange'  >
				<!-- 关注 -->
			<swiper-item >
			
				<scroll-view scroll-y="true" class="list" @scrolltolower="lodemore(tabIndex)">
					
					<block v-for="(item,index1) in guanzhulist.list" :key="index1">
						<common-list @guanzhu="guanzhu" @ding="ding" :item="item" :index="index1"></common-list>
						
					</block>
				<!-- 上拉刷新 -->
				<load-more :message="guanzhulist.message"></load-more>
			</scroll-view>
			</swiper-item>
			
			<!-- 话题 -->
			<swiper-item >
			
				<scroll-view scroll-y="true" class="list" @scrolltolower="lodemore(tabIndex)">
					<!-- 搜索 -->
					<view class="search">
						<u-search placeholder="搜索话题吧" input-align="center" :show-action="isBtn" shape="square" bg-color="#F4F4F4" v-model="keyword"></u-search>
					</view>
					<!-- 轮播图 -->
					<u-swiper class="lunbo" :list="imglist" ></u-swiper>
					<!-- 热门分类 -->
					<topiHot :lables="lables" ></topiHot>
					<!-- 最近更新 -->
					<view class="news-lately-top">
						最近更新
					</view>
					<topic-lately :latelyda='latelyda'></topic-lately>
					<!-- 上拉刷新 -->
					<load-more :message="guanzhulist.message"></load-more>
				</scroll-view>
			</swiper-item>
			
		</swiper>
		</view>
		
	</view>
</template>
<script>
		import commonList from '../../components/common/common-list.vue'
		import newsNavBar from '../../components/news-nav-bar/news-nav-bar.vue'
		import loadMore from '../../components/common/load-more.vue'
		import topiHot from '../../components/topic/topic-hot.vue'
		import topicLately from '../../components/topic/topic-lately.vue'
	export default{
		components:{
			commonList,
			newsNavBar,
			loadMore,
			topiHot,
			topicLately
		},
		onLoad() {
			uni.getSystemInfo({
			    success:  (res) =>{
			      
			     let height=  res.windowHeight-uni.upx2px(100);
				 this.TabHeight=height;
			     
			    }
			});
		},
		data() {
			return {
				keyword:'',//搜索框输入内容
				TabHeight:500,//高度
				tabIndex:0,
				isBtn:false,
				//最近更新
				latelyda:[
					{
						img:'../../static/demo/demo6.jpg',
						title:'#你真棒#',
						text:'你是最棒的大傻逼',
						newnum:21,
						todaynum:99,
						id:1
					},
					{
						img:'../../static/demo/demo6.jpg',
						title:'#你真棒#',
						text:'你是最棒的大傻逼',
						newnum:21,
						todaynum:99,
						id:1
					},
					{
						img:'../../static/demo/demo6.jpg',
						title:'#你真棒#',
						text:'你是最棒的大傻逼',
						newnum:21,
						todaynum:99,
						id:1
					},
					{
						img:'../../static/demo/demo6.jpg',
						title:'#你真棒#',
						text:'你是最棒的大傻逼',
						newnum:21,
						todaynum:99,
						id:1
					},
				],
				lables:[
					{
						name:"情感"
					},
					{
						name:"情感"
					},
					
					{
						name:"情感"
					},
					{
						name:"情感"
					},
					{
						name:"情感"
					},
					{
						name:"情感"
					}
				],
				
				imglist:[
					{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '我是1'
					},
					{
						image: '../../static/demo/banner2.jpg',
						title: '我是2'
					},
					{
						image: '../../static/demo/banner3.jpg',
						title: '我是3'
					}
				],//轮播图片
				tabBars: [{
				    name: '关注',
				    id: 'guanzhu'
				}, {
				    name: '推荐',
				    id: 'tuijian'
				}],
				guanzhulist:{
					message:'上拉加载更多',
					list:[{
						//图片样式
						username:'我是昵称',
						userurl:'../../static/demo/datapic/10.jpg',
						userage:20,
						usersex:'女',
						isguanzhu:true,
						title:'我是图片',
						imgsrc:'../../static/demo/datapic/12.jpg',
						video:false,
						share:false,
						isimg:true,
						address:'深圳 龙岗',
						sharenum:22,
						talk:21,
						ding:22,
						isding:false
					},
					{
						//视频样式
						username:'我是昵称',
						userage:20,
						userurl:'../../static/demo/datapic/10.jpg',
						usersex:'男',
						isguanzhu:false,
						title:'我是视频',
						imgsrc:'../../static/demo/datapic/12.jpg',
						video:{
							playnum:20,
							time:'2:11'
						},
						share:false,
						address:'深圳 龙岗',
						sharenum:22,
						talk:21,
						ding:22					
					},
					
					{
						///文字格式
						username:'我是昵称',
						userage:20,
						userurl:'../../static/demo/datapic/10.jpg',
						usersex:'男',
						isguanzhu:false,
						title:'我是标题文字啊',
						imgsrc:'',
						video:false,
						share:false,
						address:'深圳 龙岗',
						sharenum:22,
						talk:21,
						ding:22					
					},
					//分享
					{
						username:'我是昵称',
						userage:20,
						userurl:'../../static/demo/datapic/10.jpg',
						usersex:'男',
						isguanzhu:false,
						title:'我是分享啊',
						imgsrc:'',
						video:false,
						share:{
							shareimg:'../../static/demo/datapic/10.jpg',
							sharetitle:'我是分享的内容啊'
						},
						address:'深圳 龙岗',
						sharenum:22,
						talk:21,
						ding:22					
					}
					]
				}
				
			}
		},
		methods:{
			//上拉刷新
			lodemore(index){
				console.log(this.guanzhulist.message)
			
				if(this.guanzhulist.message!="上拉加载更多"){
					return
				}
				
				//创建一个虚拟对象
				this.guanzhulist.message="加载中"
				if(index==1){
					//加载话题
					setTimeout(()=> {
						let obj=	{
						img:'../../static/demo/demo6.jpg',
						title:'#我是新加载的#',
						text:'你是最棒的大傻逼',
						newnum:11,
						todaynum:1,
						id:1
					}
						
						this.latelyda.push(obj);
						this.guanzhulist.message="上拉加载更多"
					}, 1000);
					
				}else{
					//加载关注的
					setTimeout(()=> {
						let obj=	{
										//图片样式
										username:'我是昵称',
										userurl:'../../static/demo/datapic/10.jpg',
										userage:20,
										usersex:'女',
										isguanzhu:true,
										title:'我是图片',
										imgsrc:'../../static/demo/datapic/12.jpg',
										video:false,
										share:false,
										isimg:true,
										address:'深圳 龙岗',
										sharenum:22,
										talk:21,
										ding:22,
										isding:false
									}
						
						this.guanzhulist.list.push(obj);
						this.guanzhulist.message="上拉加载更多"
					}, 1000);
				}
				
				
				
			},
			//关注x
			guanzhu(index){
				
				//取消关注
				if(this.guanzhulist.list[index].isguanzhu){
					this.$refs.uToast.show({
						title: '取消关注成功',
						type: 'success',
						position:'top'
					})
				}else{
					this.$refs.uToast.show({
						title: '关注成功',
						type: 'success',
						position:'top'
					})
				}
				this.guanzhulist.list[index].isguanzhu=!this.guanzhulist.list[index].isguanzhu
			},
			//顶
			ding(index){
				
				if(this.guanzhulist.list[index].isding){
					this.guanzhulist.list[index].ding--;
				}else{
					this.guanzhulist.list[index].ding++;
				}
				this.guanzhulist.list[index].isding=!this.guanzhulist.list[index].isding
			},
			changtab(index){
				this.tabIndex=index
			},
			//滑动tab
			tabChange(event){
				this.tabIndex=event.detail.current
			},
			//去发布
			submit(){
				uni.navigateTo({
					url:'../add-input/add-input'
				})
			},
			//去搜索
			search(){
				uni.navigateTo({
					url:'../search/search'
				})
			}
		}
	}
</script>
<style>
	.lunbo{
		margin: 0px 10upx 0px 10px;
	}
	.search{
		color: #CECECE;
		padding: 10px;
	}
	.news-lately-top{
		margin-top: 10upx;
		margin-bottom: 10upx;
		color: #010101;
		font-size: 30upx;
		margin-left: 20upx;
		
	}
</style>